<template>
    <div class="wordText" @click.stop.prevent="chooseText(index, source, 'dw')">
        <div class="roleBox">
            <!-- <a-input class="inputs" v-model:value="source.role" :bordered="false" @blur="changeRoleHandle" placeholder="为角色命名" /> -->
            <span>{{ parseTime(source.startTime, '{h}:{i}:{s}') }}</span>
            <span @click.stop.prevent="handleEdit(index, source, 'dw')" class="edit-inline">修改</span>
        </div>
        <a-dropdown :trigger="['contextmenu']" @visibleChange="visibleChange">
            <div class="content" :class="isVisible ? 'content1' : ''" v-html="source.content"></div>
            <template #overlay>
                <a-menu class="ssvb">
                    <a-menu-item key="1" @click="chooseText(index, source, 'dw')"> <span class="dropItem">定位</span></a-menu-item>
                    <a-menu-item key="2" @click="chooseText(index, source, 'xg')"> <span class="dropItem">修改</span></a-menu-item>
                </a-menu>
            </template>
        </a-dropdown>
        <ChangeTextMotal ref="textMotalEle" @changeTextHandle="changeTextHandle" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { parseTime } from '@/utils/index';
import { useUserStore } from '@/store/user';
import { audioEditText } from '@/utils/audioVideo';
import { message } from 'ant-design-vue';
import { useRouter, useRoute } from 'vue-router';
import ChangeTextMotal from './ChangeTextMotal.vue';
const router = useRouter();
const route = useRoute();
const textMotalEle = ref<any>(null);
const userStore = useUserStore();
const props = defineProps({
    index: {
        type: Number,
        default: 0
    },
    source: {
        type: Object,
        default() {
            return {};
        }
    }
});
const oldText = ref('');
const oldRole = ref('');
onMounted(() => {
    oldRole.value = props.source.role;
});

const handleEdit = async (index: number, row: any, key: string) => {
    oldText.value = row.content;
    let newsRow = { ...row };
    newsRow.content = await removeBiaoHong(newsRow.content);
    let obj = { index: index, key: key, ...newsRow };
    textMotalEle.value.showTextMotal(obj);
}

const isVisible = ref(false);
const chooseText = async (index: number, row: any, key: string) => {
    console.log(index);
    console.log(row);
    let newsRow = { ...row };
    newsRow.content = await removeBiaoHong(newsRow.content);
    let obj = { index: index, key: key, ...newsRow };
    if (key == 'xg') {
        textMotalEle.value.showTextMotal(obj);
    } else {
        userStore.changeTextInfo(obj);
    }
    isVisible.value = false;
};
const visibleChange = (visible: boolean) => {
    console.log(visible);
    isVisible.value = visible;
};
const removeBiaoHong = async (word: any) => {
    var reg = /(<\/?abbr.*?>)/gi;
    var s = word.replace(reg, '').replace(/&amp;/gi, '&');
    return s;
};
const changeRoleHandle = (e: any) => {
    console.log(e.target.value);
    console.log(oldRole.value);
    if (oldRole.value == e.target.value) {
        return;
    }
    let obj = { [oldRole.value]: e.target.value };
    console.log(obj);
    userStore.updataRoleName(obj);
};
//修改文字
const changeTextHandle = async (obj: any) => {
    audioEditText({ 
        mediaResourceId: route.query.id, 
        correctText: obj.content, 
        wrongText: oldText.value,
        start: props.source.start,
        end: props.source.end
    })
        .then(async (res: any) => {
            console.log('文字记录修改');
            console.log(res);
            if (res.data.status_code == 1) {
                message.success('修改成功！');
                props.source.content = obj.content;
                textMotalEle.value.handleCancel();
            }
        })
        .catch(err => console.log(err));
};
</script>
<style scoped lang="scss">
.wordText {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #606266;
    margin-bottom: 16px;
    text-align: justify;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 4px 6px;
    &:hover {
        background-color: rgba($color: #F9601D, $alpha: 0.2);
        border-radius: 8px;
    }
}
.roleBox {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #909399;

    .edit-inline{
        color: #F9601D;
        cursor: pointer;
    }
}
.inputs {
    border: 1px solid #fff;
    padding-right: 8px;
    color: #e6a23b;
    width: 180px;
}
.inputs:hover {
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.content {
    text-align: justify;
    display: inline;
}
.content1 {
    color: #303133;
    background: rgba(13, 134, 255, 0.2);
    font-weight: bold;
}
.dropItem {
    width: 80px;
    height: 34px;
    line-height: 34px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #303133;
}
.ssvb {
    border-radius: 8px;
    overflow: hidden;
}
</style>
